<template>
  <div class="panel article-nav-panel">
    <div class="panel-header">
      <i class="fas fa-compass" />
      <span>文章导航</span>
      <div class="nav-tabs">
        <button
          class="tab-btn"
          :class="{ active: activeTab === 'category' }"
          @click="activeTab = 'category'"
        >
          分类
        </button>
        <button
          class="tab-btn"
          :class="{ active: activeTab === 'tag' }"
          @click="activeTab = 'tag'"
        >
          标签
        </button>
        <button
          class="tab-btn"
          :class="{ active: activeTab === 'history' }"
          @click="activeTab = 'history'"
        >
          历史
        </button>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-section">
      <div class="search-input">
        <i class="fas fa-search" />
        <input
          v-model="searchKeyword"
          type="text"
          :placeholder="getSearchPlaceholder()"
          @input="handleSearch"
        />
        <el-button v-if="searchKeyword" size="small" text @click="clearSearch">
          <i class="fas fa-times" />
        </el-button>
      </div>
    </div>

    <!-- 分类导航 -->
    <div v-if="activeTab === 'category'" class="nav-content">
      <div class="category-tree">
        <div
          v-for="category in filteredCategories"
          :key="category.id"
          class="category-item"
          :class="{ expanded: expandedCategories.includes(category.id) }"
        >
          <div class="category-header" @click="toggleCategory(category.id)">
            <div class="category-info">
              <i class="fas fa-folder" :class="{ 'has-children': category.children }" />
              <span class="category-name">{{ category.name }}</span>
            </div>
            <div class="category-meta">
              <span class="article-count">{{ category.count }}</span>
              <i v-if="category.children" class="fas fa-chevron-down toggle-icon" />
            </div>
          </div>
          <div v-if="category.children && expandedCategories.includes(category.id)" class="category-children">
            <div
              v-for="child in category.children"
              :key="child.id"
              class="category-child"
              @click="navigateToCategory(child.id)"
            >
              <i class="fas fa-file-alt" />
              <span>{{ child.name }}</span>
              <span class="count">({{ child.count }})</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签云 -->
    <div v-if="activeTab === 'tag'" class="nav-content">
      <div class="tag-cloud">
        <span
          v-for="tag in filteredTags"
          :key="tag.name"
          class="tag-item"
          :class="{ 'hot': tag.count > 100, 'popular': tag.count > 50 }"
          @click="navigateToTag(tag.name)"
        >
          {{ tag.name }}
          <span class="tag-count">{{ tag.count }}</span>
        </span>
      </div>
      <div v-if="filteredTags.length === 0" class="empty-state">
        <i class="fas fa-tag" />
        <p>没有找到相关标签</p>
      </div>
    </div>

    <!-- 浏览历史 -->
    <div v-if="activeTab === 'history'" class="nav-content">
      <div class="history-list">
        <div
          v-for="(item, index) in recentHistory"
          :key="item.id"
          class="history-item"
          @click="navigateToArticle(item.id)"
        >
          <div class="history-index">{{ index + 1 }}</div>
          <div class="history-content">
            <h4 class="history-title">{{ item.title }}</h4>
            <div class="history-meta">
              <span class="history-time">{{ formatTime(item.viewTime) }}</span>
              <span class="history-category">{{ item.category }}</span>
            </div>
          </div>
          <div class="history-actions">
            <el-button size="small" text @click.stop="removeFromHistory(item.id)">
              <i class="fas fa-times" />
            </el-button>
          </div>
        </div>
      </div>
      <div class="history-footer">
        <el-button size="small" text @click="clearHistory">
          <i class="fas fa-trash" />
          清空历史
        </el-button>
      </div>
    </div>

    <!-- 收藏夹 -->
    <div class="favorite-section">
      <div class="section-title">
        <i class="fas fa-star" />
        <span>我的收藏</span>
        <el-button size="small" text @click="showAllFavorites">
          查看全部
        </el-button>
      </div>
      <div class="favorite-list">
        <div
          v-for="item in recentFavorites"
          :key="item.id"
          class="favorite-item"
          @click="navigateToArticle(item.id)"
        >
          <div class="favorite-content">
            <h4 class="favorite-title">{{ item.title }}</h4>
            <div class="favorite-meta">
              <span class="favorite-time">{{ formatTime(item.collectTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getCategoryInfo } from '@/api/category';
import type { BlogCategoryVO } from '@/api/category/types';
import { ElButton } from 'element-plus';

const router = useRouter();

const activeTab = ref('category');
const searchKeyword = ref('');
const expandedCategories = ref<number[]>([]);

// 分类数据
const categories = ref<any[]>([
  {
    id: 1,
    name: '前端开发',
    count: 156,
    children: [
      { id: 11, name: 'JavaScript', count: 89 },
      { id: 12, name: 'Vue.js', count: 45 },
      { id: 13, name: 'React', count: 22 }
    ]
  },
  {
    id: 2,
    name: '后端开发',
    count: 98,
    children: [
      { id: 21, name: 'Java', count: 56 },
      { id: 22, name: 'Node.js', count: 32 },
      { id: 23, name: 'Python', count: 10 }
    ]
  },
  {
    id: 3,
    name: '数据库',
    count: 45,
    children: [
      { id: 31, name: 'MySQL', count: 25 },
      { id: 32, name: 'MongoDB', count: 20 }
    ]
  },
  {
    id: 4,
    name: 'DevOps',
    count: 67,
    children: [
      { id: 41, name: 'Docker', count: 35 },
      { id: 42, name: 'Kubernetes', count: 32 }
    ]
  }
]);

// 标签数据
const tags = ref([
  { name: 'JavaScript', count: 156 },
  { name: 'Vue.js', count: 128 },
  { name: 'React', count: 98 },
  { name: 'TypeScript', count: 87 },
  { name: 'Node.js', count: 76 },
  { name: 'CSS', count: 65 },
  { name: 'HTML', count: 54 },
  { name: 'MongoDB', count: 43 },
  { name: 'MySQL', count: 38 },
  { name: 'Docker', count: 32 },
  { name: 'Git', count: 28 },
  { name: 'Linux', count: 25 }
]);

// 浏览历史
const recentHistory = ref([
  {
    id: 1,
    title: 'Vue 3 Composition API 最佳实践',
    category: 'Vue.js',
    viewTime: new Date(Date.now() - 30 * 60 * 1000)
  },
  {
    id: 2,
    title: 'TypeScript 高级类型系统',
    category: 'TypeScript',
    viewTime: new Date(Date.now() - 2 * 60 * 60 * 1000)
  },
  {
    id: 3,
    title: 'Docker 容器化部署指南',
    category: 'Docker',
    viewTime: new Date(Date.now() - 5 * 60 * 60 * 1000)
  }
]);

// 最近收藏
const recentFavorites = ref([
  {
    id: 4,
    title: '前端性能优化实战',
    collectTime: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000)
  },
  {
    id: 5,
    title: '微服务架构设计模式',
    collectTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
  }
]);

// 过滤后的分类
const filteredCategories = computed(() => {
  if (!searchKeyword.value) return categories.value;

  const keyword = searchKeyword.value.toLowerCase();
  return categories.value.filter(category =>
    category.name.toLowerCase().includes(keyword) ||
    category.children?.some(child => child.name.toLowerCase().includes(keyword))
  );
});

// 过滤后的标签
const filteredTags = computed(() => {
  if (!searchKeyword.value) return tags.value;

  const keyword = searchKeyword.value.toLowerCase();
  return tags.value.filter(tag =>
    tag.name.toLowerCase().includes(keyword)
  );
});

// 获取搜索框占位符
const getSearchPlaceholder = () => {
  switch (activeTab.value) {
    case 'category':
      return '搜索分类...';
    case 'tag':
      return '搜索标签...';
    case 'history':
      return '搜索历史记录...';
    default:
      return '搜索...';
  }
};

// 切换分类展开状态
const toggleCategory = (categoryId: number) => {
  const index = expandedCategories.value.indexOf(categoryId);
  if (index > -1) {
    expandedCategories.value.splice(index, 1);
  } else {
    expandedCategories.value.push(categoryId);
  }
};

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑
};

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = '';
};

// 导航到分类
const navigateToCategory = (categoryId: number) => {
  router.push({
    name: 'blogListShow',
    params: { categoryId: String(categoryId) }
  });
};

// 导航到标签
const navigateToTag = (tagName: string) => {
  router.push({
    name: 'blogListShow',
    query: { tag: tagName }
  });
};

// 导航到文章
const navigateToArticle = (articleId: number) => {
  router.push({
    name: 'blogViewShow',
    params: { blogId: String(articleId) }
  });
};

// 从历史中移除
const removeFromHistory = (articleId: number) => {
  const index = recentHistory.value.findIndex(item => item.id === articleId);
  if (index > -1) {
    recentHistory.value.splice(index, 1);
  }
};

// 清空历史
const clearHistory = () => {
  recentHistory.value = [];
};

// 显示所有收藏
const showAllFavorites = () => {
  router.push({ name: 'userFavorites' });
};

// 格式化时间
const formatTime = (time: Date) => {
  const now = new Date();
  const diff = now.getTime() - time.getTime();
  const minutes = Math.floor(diff / (1000 * 60));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (minutes < 1) return '刚刚';
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;
  return time.toLocaleDateString();
};

// 加载分类数据
const loadCategories = () => {
  getCategoryInfo().then(response => {
    if (response.data) {
      categories.value = response.data as any[];
    }
  });
};

onMounted(() => {
  loadCategories();
});
</script>

<style scoped lang="scss">
.panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
  font-size: 1rem;

  i {
    color: #8b5cf6;
    font-size: 1.1rem;
  }

  .nav-tabs {
    margin-left: auto;
    display: flex;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;

    .tab-btn {
      padding: 4px 8px;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 0.75rem;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s ease;

      &.active {
        background: white;
        color: #8b5cf6;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
    }
  }
}

// 搜索区域
.search-section {
  margin-bottom: 16px;

  .search-input {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;

    i {
      color: #94a3b8;
      font-size: 0.8rem;
    }

    input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-size: 0.85rem;
      color: #1e293b;
      margin: 0 8px;

      &::placeholder {
        color: #94a3b8;
      }
    }
  }
}

// 导航内容
.nav-content {
  margin-bottom: 16px;
  min-height: 200px;
}

// 分类树
.category-tree {
  .category-item {
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;

    &.expanded {
      border-color: #8b5cf6;
    }

    .category-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      cursor: pointer;
      transition: background 0.2s ease;

      &:hover {
        background: #f8fafc;
      }

      .category-info {
        display: flex;
        align-items: center;
        gap: 8px;

        i {
          color: #8b5cf6;
          font-size: 0.9rem;

          &.has-children {
            color: #64748b;
          }
        }

        .category-name {
          font-size: 0.9rem;
          font-weight: 500;
          color: #1e293b;
        }
      }

      .category-meta {
        display: flex;
        align-items: center;
        gap: 8px;

        .article-count {
          font-size: 0.8rem;
          color: #64748b;
          background: #f1f5f9;
          padding: 2px 6px;
          border-radius: 4px;
        }

        .toggle-icon {
          font-size: 0.7rem;
          color: #94a3b8;
          transition: transform 0.2s ease;
        }

        .expanded & .toggle-icon {
          transform: rotate(180deg);
        }
      }
    }

    .category-children {
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;

      .category-child {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px 10px 20px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: #e2e8f0;
        }

        i {
          color: #94a3b8;
          font-size: 0.8rem;
        }

        span {
          font-size: 0.85rem;
          color: #475569;
        }

        .count {
          margin-left: auto;
          font-size: 0.75rem;
          color: #94a3b8;
        }
      }
    }
  }
}

// 标签云
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;

    &:hover {
      background: #8b5cf6;
      color: white;
      transform: translateY(-1px);
    }

    &.hot {
      background: #fee2e2;
      color: #dc2626;

      &:hover {
        background: #dc2626;
        color: white;
      }
    }

    &.popular {
      background: #fef3c7;
      color: #d97706;

      &:hover {
        background: #d97706;
        color: white;
      }
    }

    .tag-count {
      font-size: 0.7rem;
      opacity: 0.8;
    }
  }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;

  i {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
  }

  p {
    font-size: 0.9rem;
    margin: 0;
  }
}

// 浏览历史
.history-list {
  .history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: #f8fafc;
      border-color: #e2e8f0;
    }

    .history-index {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #8b5cf6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      font-weight: 600;
    }

    .history-content {
      flex: 1;
      min-width: 0;

      .history-title {
        font-size: 0.85rem;
        font-weight: 500;
        color: #1e293b;
        margin: 0 0 4px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .history-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: #94a3b8;

        .history-category {
          background: #f1f5f9;
          color: #64748b;
          padding: 2px 6px;
          border-radius: 4px;
        }
      }
    }

    .history-actions {
      opacity: 0;
      transition: opacity 0.2s ease;

      .history-item:hover & {
        opacity: 1;
      }
    }
  }
}

.history-footer {
  text-align: center;
  margin-top: 12px;
}

// 收藏夹
.favorite-section {
  .section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;

    i {
      color: #f59e0b;
      font-size: 0.8rem;
    }
  }

  .favorite-list {
    .favorite-item {
      padding: 10px;
      background: #fef7e0;
      border-radius: 8px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #fde68a;
        transform: translateX(2px);
      }

      .favorite-content {
        .favorite-title {
          font-size: 0.85rem;
          font-weight: 500;
          color: #1e293b;
          margin: 0 0 4px 0;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .favorite-meta {
          font-size: 0.75rem;
          color: #92400e;
        }
      }
    }
  }
}
</style>